<template>
	<!-- 创建商户、修改商户 -->
	<view class="edit-wrapper">
		<!-- 第一步 商户主体类型 -->
		<view class="form-wrapper">
			<view class="bg">

			</view>
			<view class="business-type-wraper">

				<view class="title"><text class="yellow">温馨提示：</text>请根据提示及实际经营范围选择相应的主体类型</view>

				<view class="select-wrapper">
					<view class="">
						<view class="content-title">
							请选择商户类型
						</view>
						<view class="tip">
							请选择下方任一类型进行认证
						</view>
					</view>
					<radio-group @change="radioChange">
						<template v-for="(item, index) in businessTypeOpts" :key="index">
							<view class="item">
								<view class="left">
									<view class="">
										<image class="img" :src="item.icon" />
									</view>

									<view class="content">
										<view class="name">{{ item.name }}</view>
										<view class="desc">
											<!-- 小微商户 -->
											<template v-if="item.value == 4">
												<text class="blue">无营业执照</text>经营的商户
											</template>
											<!-- 个体工商户 -->
											<template v-else-if="item.value == 1">
												<text class="blue">有营业执照</text>的个体经营商户
											</template>
											<!-- 企业 -->
											<template v-else-if="item.value == 0">
												营业执照带有<text class="blue">公司</text>字样的均为企业
											</template>
											<!-- 政府组织及事业单位 -->
											<!-- <template v-else-if="item.value == 2">
												{{ item.desc }}
											</template> -->
											<!-- 其他机构组织 -->
											<!-- <template v-else-if="item.value == 3">
												{{ item.desc }}
											</template> -->

										</view>
									</view>

								</view>
								<view class="right">
									<radio :value="item.value" :checked="formData.businessType === item.value" />

								</view>
							</view>
						</template>
					</radio-group>
				</view>


			</view>
			<!-- 商户：按钮 -->
			<view class="btn-list">
				<!-- <view class="btn-base w200 gray" @click="upBtn()">上一步</view> -->
				<button class="btn-base" @click="nextBtn()">下一步</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useStore
	} from "@/store/index";
	import {
		ref,
		reactive,
		computed,
		defineEmits,
		onMounted,
		defineProps
	} from 'vue'
	import {
		queryDevicesInfo,
		channelQuery
	} from '@/api/common'
	import {
		queryMerchants,
		queryExistence
	} from "@/api/mine"
	const emit = defineEmits(['updateValue'])
	/** store实例 */
	const store = useStore();
	/** 生命周期 */
	onMounted(() => {
		// 获取详情
		getRoute();
		existMerchants()
	});
	// 禁用表单、禁止修改
	const isDisable = computed(() => {
		return (
			pageType.value === 'modify' &&
			formData.value.approvePass == 1 &&
			!licenseNameRules.editSwitch
		)
	});
	const props = defineProps({
		// 设备SN
		scanResult: {
			type: String,
			default: null,
		},
	});
	// 渠道
	const channel = ref(null)
	/** 商户进件规则 E */

	// 步骤索引
	let stepIndex = ref(1);
	// 页面类型
	let pageType = ref("create");
	let formData = ref({
		businessType: 4, // 商户类型 0: 企业, 1: 个体工商户, 2: 政府组织机及事业单位, 3: 其他机构组织, 4: 小微商户
		// oss签名配置
		// let ossConfig = {};
	});
	// 商户主体类型
	let businessTypeOpts = reactive([{
			name: "小微商户",
			desc: "无营业执照经营的商户，包括流动摊点",
			icon: "/static/icon/small_icon.png",
			value: 4,
			show: true,
		},
		{
			name: "个体工商户",
			desc: "有营业执照的个体经营商户",
			icon: "/static/icon/single_icon.png",
			value: 1,
			show: true,
		},
		{
			name: "企业",
			desc: "营业执照带有公司字样的均为企业",
			icon: "/static/icon/company_icon.png",
			value: 0,
			show: true,
		}
	]);

	function radioChange(e) {
		console.log("e=" + JSON.stringify(e))
		formData.value.businessType = e.detail.value;
	}

	let selectBusinessType = (val) => {
		console.log("val", val)
		formData.value.businessType = val
	}
	let upBtn = () => {
		emit('updateValue', false)
	}
	let nextBtn = () => {
		console.log("formData.value.businessType", formData.value.businessType)
		if (formData.value.businessType === 4) {
			uni.navigateTo({
				url: `/pagesLogin/smallMerchant/index?authorizationFlag=false&&scanResult=${props.scanResult}`,
			});
		}
		if (formData.value.businessType === 1) {
			uni.navigateTo({
				url: `/pagesLogin/individualMerchant/index?authorizationFlag=false&&scanResult=${props.scanResult}&&type=INDIVIDUAL`
			});
		}
		if (formData.value.businessType === 0) {
			// uni.navigateTo({
			// 	url: `/pagesLogin/companyMerchant/index?authorizationFlag=false&&scanResult=${props.scanResult}`,
			// });
			uni.navigateTo({
				url: `/pagesLogin/individualMerchant/index?authorizationFlag=false&&scanResult=${props.scanResult}&&type=ENTERPRISE`
			});
		}
	}
	// 根据设备SN
	let getRoute = () => {
		channelQuery(props.scanResult).then((res) => {
				console.log("res-res888888888888", res)
				channel.value = res
				console.log(" channel.value", channel.value)
				console.log("store", store)
				let channelInfomation = channel.value
				// 存储通道信息
				store.setData({
					channelInfomation,
				});
				uni.setStorageSync("channelInfomation", channelInfomation);
			})
			.catch((err) => {
				console.log("err-err", err.data.code)
				if (err.data.code == 404) {
					upBtn()
				}
			});
	}
	// 查询商户详情
	const merchantStatus = (val) => {
		queryMerchants(val)
			.then((res) => {
				console.log("res", res)
				let id = val || '4f58e18c-a414-4cf3-9ef1-65baa1b4cdd7'
				let status = res.payload.state || 'WAIT'
				let sn = res.payload.sn
				let reveal = res.reveal
				upBtn()
				uni.navigateTo({
					url: `/pagesLogin/bindSuccess/index?id=${id}&status=${status}&sn=${sn}&reveal=${reveal}`,
				});
			})
			.catch((err) => {

			});
	}
	// 根据sn号判断是否存在商户
	const existMerchants = () => {
		queryExistence(props.scanResult)
			.then((res) => {
				console.log("res-888888888", res)
				if (res.payload.merchantId) {
					merchantStatus(res.payload.merchantId)
				}

			})
			.catch((err) => {

			});
	}
	// 输入框提示语样式
	const placeholderStyle = "color: #999999";
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>